<template>
	<view class="zone">
		<Header title="仙器夺宝"></Header>
		<view class="main">
			<view class="xianyu">
				<image @click="$p.navto('/pages/index/mytreasureHunt')" src="http://image.qxgm.site/tdz/img/duobao/1.png" mode="widthFix"></image>
				<image @click="$p.navto('/pages/index/awardList')" src="http://image.qxgm.site/tdz/img/duobao/2.png" mode="widthFix"></image>
				<image @click="show=true" src="http://image.qxgm.site/tdz/img/duobao/3.png" mode="widthFix"></image>
				<image @click="$p.navto('/pages/index/physExchange')" src="http://image.qxgm.site/tdz/img/duobao/4.png" mode="widthFix">
				</image>
			</view>
			<view class="info">
				<view class="part" v-for="(item,index) in list" :key="index">
					<view class="title">
						<image src="http://image.qxgm.site/tdz/img/duobao/title.png" mode="widthFix"></image>
						<text>{{item.remark}}</text>
						<image src="http://image.qxgm.site/tdz/img/duobao/title2.png" mode="widthFix"></image>
					</view>
					<view class="kobx">
						<image class="kimg" :src="item.props.img" mode="widthFix"></image>
						<view class="jtab">
							<view class="name">
								{{item.name}}
							</view>
							<view class="need">
								所需灵石:{{item.nums}}
							</view>
							<view class="parogrss">
								<view class="opnum">{{item.use}}/{{item.nums}}</view>
								<view class="proess" :style="{width:+(item.use/item.nums).toFixed(2)*100+'%'}"></view>
							</view>
						</view>
					</view>
					<view class="duo" @click="duobao(item)">
						夺宝
					</view>
				</view>
			</view>
		</view>
		<!-- 夺宝详情 -->
		<u-mask :show="detail">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>夺宝详情</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							<view class="smtitle">
								<image src="http://image.qxgm.site/tdz/img/duobao/title.png" mode="widthFix"></image>
								<text>{{itemlist.remark}}</text>
								<image src="http://image.qxgm.site/tdz/img/duobao/title2.png" mode="widthFix"></image>
							</view>
							<image class="tanimg" :src="img" mode="widthFix"></image>
							<view class="tanname">
								{{itemlist.name}}
							</view>
							<view class="tanparogrss">
								<view class="tanproess" :style="{width:+((nums - remaining_nums + iptnum)/nums).toFixed(2)*100+'%'}"></view>
							</view>
							<view class="staab">
								<view class="aaso">
									所需灵石:{{nums}}
								</view>
								<view class="aaso">
									剩余灵石: <text class="red">{{remaining_nums - iptnum}}</text>
								</view>
							</view>
							<view class="stbana">
								<view :class="['ytab',recID==1?'act':'']" @click="choose(1)">
									{{recommend1}}灵石
								</view>
								<view :class="['ytab',recID==2?'act':'']" @click="choose(2)">
									{{recommend2}}灵石
								</view>
								<view :class="['ytab',recID==3?'act':'']" @click="choose(3)">
									{{recommend3}}灵石
								</view>
								<view :class="['ytab',recID==4?'act':'']" @click="choose(4)">
									剩余全部
								</view>
							</view>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
								class="join" @click='enrollfun'>立即参与</u-button>
							<view class="dangq">
								当前灵石:{{userinfo.lingshi}}
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="guanbi" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 玩法规则 -->
		<u-mask :show="show">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>玩法规则</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop3">
							<view class="showbox">
								<view class="s1">
									1.参与夺宝:
								</view>
								<view class="s2">
									每个夺宝场内可花费灵石参与夺宝活动，满人次即可开奖。
								</view>
							</view>
							<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png" mode="widthFix"></image>
							<view class="showbox">
								<view class="s1">
									2.夺宝号码:
								</view>
								<view class="s2">
									每参与灵石对应一个夺宝号码，中奖号码在每期的夺宝号码中产出。
								</view>
							</view>
							<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png" mode="widthFix"></image>
							<view class="showbox">
								<view class="s1">
									3.夺宝开奖:
								</view>
								<view class="s2">
									每期夺宝满灵石后自动开奖，计算出开奖号码进行开奖。参与灵石越多，中奖几率越高。
								</view>
							</view>
							<image class="ghang" src="http://image.qxgm.site/tdz/img/liandan/mg-13.png" mode="widthFix"></image>
							<view class="showbox">
								<view class="s1">
									4.领取奖励:
								</view>
								<view class="s2">
									夺宝中奖后奖励会自动发放。
								</view>
							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="show = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
	</view>
</template>
<script>
	export default {
		data() {
			return {
                list:[],
				detail: false,
				show: false,
                recommend1: '', //人次
                recommend2: '', //人次
                recommend3: '', //人次
                recommend4:'',//剩余
                remaining_nums:'',//所需要的灵石
                itemlist:{},
                userinfo:uni.getStorageSync('userinfo'),
                nums:'',
                iptnum:'',//投放的数量
                recID:0,
                id:'',
                img:''
			}
		},
		onLoad() {
            this.rewardlist()
		},
		methods: {
            //列表
            async rewardlist(item) {
            	let res = await this.$http.index.rewardlist()
            	if (res.code == 1) {
                    this.list = res.data
            	}
            },
            // 获取个人信息
            async getUserInfo() {
            	let res = await this.$http.index.getUserInfo()
            	if (res.code == 1) {
            		this.userinfo = res.data
                    uni.setStorageSync('userinfo', res.data)
            	}
            },
            //参与夺宝
            async enrollfun(){
                if(this.recID == 0){
                    this.$u.toast('请选择投入的灵石数量')
                    return
                }
                
                let res = await this.$http.index.enroll({
                    id:this.id,
                    num:this.iptnum
                })
                this.$u.toast(res.msg)
                if (res.code == 1) {
                	this.detail = false
                	this.recID = false    
                	this.iptnum = ''
                    this.rewardlist()
                    this.getUserInfo()
                }
            },
            choose(num){
                if(num == 1){
                    if (this.recommend1 > this.remaining_nums) {
                    	uni.showToast({
                    		title: '投入数量不能大于剩余可投数量',
                    		icon: 'none',
                    		duration: 1500
                    	});
                    	
                    }else{
                        this.recID = num
                        this.iptnum = this.recommend1
                    }
                    
                }else if (num == 2) {
					if (this.recommend2 > this.remaining_nums) {
						uni.showToast({
							title: '投入数量不能大于剩余可投数量',
							icon: 'none',
							duration: 1500
						});
					}else{
                        this.recID = num
                        this.iptnum = this.recommend2
                    }
				} else if (num == 3) {
					if (this.recommend3 > this.remaining_nums) {
						uni.showToast({
							title: '投入数量不能大于剩余可投数量',
							icon: 'none',
							duration: 1500
						});
					}else{
                        this.recID = num
                        this.iptnum = this.recommend3
                    }
				} else if (num == 4) {
                    this.recID = num
					this.iptnum = this.remaining_nums
				}
                console.log(this.iptnum)
            },
            guanbi(){
                this.detail = false
                this.recID = false    
                this.iptnum = ''
            },
            //夺宝详情
            async duobao(item){
                let res = await this.$http.index.getdetail({
                    id:item.id
                })
                if (res.code == 1) {
                    this.detail = true
                    this.recommend1 = res.data.recommend1
                    this.recommend2 = res.data.recommend2
                    this.recommend3 = res.data.recommend3
                    this.remaining_nums = res.data.remaining_nums
                    this.itemlist = res.data
                    this.nums = item.nums
                    this.id = item.id
                    this.img = item.props.img
                }
            }
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.xianyu {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40px 18px 30px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-01.png) no-repeat;
		background-size: 100% 100%;

		image {
			width: 18%;
		}
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 21%;
		}

		text {
			font-size: 12px;
			color: #735783;
			font-weight: normal;
			line-height: 12px;
			margin: 0 4%;
		}
	}


	.info {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 5px;
		height: calc(100vh - 190px);
		overflow-y: scroll;
		background: #d3cbc6;
	}

	.part {
		width: 49.5%;
		background: rgba(223, 217, 213, 1);
		border-radius: 5px;
		padding: 10px 8px;
		box-sizing: border-box;
		margin-bottom: 5px;

		.kimg {
			width: 37%;
			background: url(http://image.qxgm.site/tdz/img/duobao/kuang.png) no-repeat;
			background-size: 100% 100%;
		}

		.kobx {
			display: flex;
			align-items: center;
			margin-top: 14px;
		}

		.name {
			font-size: 16px;
			color: #333333;
			font-weight: normal;
			line-height: 16px;
		}

		.jtab {
			flex: 1;
			margin-left: 5px;
		}

		.need {
			font-size: 13px;
			font-weight: normal;
			color: #333333;
			line-height: 13px;
			margin-top: 6px;
		}

		.parogrss {
			position: relative;
			width: 100%;
			height: 10px;
			background: linear-gradient(0deg, #714E7A, #C97E89);
			border-radius: 1px;
			border: 1px solid;
			margin-top: 12px;
			border-image: linear-gradient(0deg, #452818, #905F44) 1 1;
		}

		.proess {
			position: absolute;
			top: 0;
			left: 0;
			height: 8px;
			background: linear-gradient(0deg, #E17636, #C97E89);
			border-radius: 1px;
		}

		.opnum {
			position: absolute;
			top: -1px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
			font-size: 10px;
			color: #FFFFFF;
			font-weight: normal;
			zoom: 0.92;
		}
	}

	.duo {
		display: block;
		margin: 10px auto 0;
		width: 56%;
		text-align: center;
		font-size: 15px;
		color: #f9eeb9;
		height: 37px;
		line-height: 37px;
		font-weight: normal;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn2.png) no-repeat;
		background-size: 100% 100%;
	}


	.jihuop {
		padding: 0 7%;
		text-align: center;

		.smtitle {
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 14%;
			}

			text {
				font-size: 12px;
				color: #735783;
				font-weight: normal;
				line-height: 12px;
				margin: 0 4%;
			}
		}

		.tanimg {
			width: 29%;
			margin-top: 18px;
			background: url(http://image.qxgm.site/tdz/img/duobao/kuang.png) no-repeat;
			background-size: 100% 100%;
		}

		.tanname {
			font-size: 16px;
			font-weight: normal;
			color: #333333;
			line-height: 16px;
			margin-top: 5px;
		}



		.tanparogrss {
			position: relative;
			width: 100%;
			height: 14px;
			background: linear-gradient(0deg, #714E7A, #C97E89);
			border-radius: 1px;
			border: 1px solid;
			margin-top: 12px;
			border-image: linear-gradient(0deg, #452818, #905F44) 1 1;
		}

		.tanproess {
			position: absolute;
			top: 0;
			left: 0;
			height: 12px;
			background: linear-gradient(0deg, #E17636, #C97E89);
			border-radius: 1px;
		}

		.staab {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: normal;
			font-size: 12px;
			color: #333333;
			line-height: 12px;
			margin-top: 10px;
		}

		.red {
			color: #FF461D;
		}

		.stbana {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 12px;

			.ytab {
				width: 24%;
				font-size: 14px;
				color: #996666;
				font-weight: normal;
				height: 35px;
				line-height: 35px;
				background: url(http://image.qxgm.site/tdz/img/duobao/btn.png) no-repeat;
				background-size: 100% 100%;
			}

			.act {
				color: #333;
				background: url(http://image.qxgm.site/tdz/img/duobao/btn2.png) no-repeat;
				background-size: 100% 100%;
			}
		}

	}

	.join {
		display: block;
		margin: 26px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6 !important;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500 !important;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.dangq {
		font-size: 12px;
		font-weight: normal;
		color: #333333;
		line-height: 12px;
		margin-top: 9px;
	}

	.jihuop3 {
		padding: 0 7%;

		.showbox {
			padding: 0 1%;
		}

		.s1 {
			font-size: 15px;
			font-weight: normal;
			color: #333333;
			line-height: 15px;
			margin-bottom: 12px;
		}

		.s2 {
			font-size: 12px;
			font-weight: normal;
			color: #666666;
			line-height: 15px;
			margin-bottom: 5px;
		}

		.ghang {
			width: 100%;
			margin-bottom: 12px;
		}
	}
</style>